<template>
  <h3>setup 语法糖支持ts写法</h3>
  <div class="par">
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
    <button type="button" @click="changeStr">修改str</button>
  </div>
  <hr />
  <DeepDemo class="comson2000" />
</template>

<script lang="ts">
export default {
  name: 'Study1StuDemo6'
}
</script>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import DeepDemo from './components/DeepDemo.vue'

// setup中访问this是undefined。
console.log(this) // undefined

interface IUser {
  username: string
  sex: string
  age: number
}

// 普通变量
let str: string = '我是组合式api的普遍变量'

// 响应式变量
const str2 = ref<string>('我是响应式变量')

const userInfo: Ref<IUser> = ref({
  username: 'changsheng',
  age: 22,
  sex: 'nan'
})

const userInfo2 = ref<IUser>({
  username: 'changsheng',
  age: 22,
  sex: 'nan'
})

const changeStr = () => {
  console.log('changeStr')
  str = '我不能响应式显示UI的效果，修改我没用'
  console.log(str)
  str2.value = '我是响应变量，我可以出发UI的更新'

  fun1()
}

const fun1 = () => {
  console.log('fun1')
}

// setup函数返回的对象中的内容，可直接在模板中使用。
</script>

<style lang="scss" scoped>
// 作用子组件
// .parent::v-deep(button) {
//   border: 3px solid pink;
// }

// 推荐公用css样式封装到独立的文件引入
@import '@/assets/common.scss';

h3 {
  color: rgb(189, 35, 198);
  font-size: large;
}
p {
  color: rgb(59, 179, 103);
}
</style>
